<script setup>
import { ref } from 'vue';
import ChartContainer from '../ChartContainer.vue';

// 生成模拟数据
const hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a', '7a', '8a', '9a','10a','11a',
  '12p', '1p', '2p', '3p', '4p', '5p', '6p', '7p', '8p', '9p', '10p', '11p'];
const days = ['周六', '周五', '周四', '周三', '周二', '周一', '周日'];

const data = [];
for (let i = 0; i < 7; i++) {
  for (let j = 0; j < 24; j++) {
    data.push([j, i, Math.random() * 100]);
  }
}

const option = ref({
  tooltip: {
    position: 'top'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    data: hours,
    boundaryGap: false,
    splitArea: {
      show: true
    }
  },
  yAxis: {
    type: 'category',
    data: days,
    boundaryGap: false,
    splitArea: {
      show: true
    }
  },
  visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    orient: 'horizontal',
    left: 'center',
    bottom: '0%',
    inRange: {
      color: ['#3498db', '#2ecc71', '#f1c40f', '#e74c3c']
    }
  },
  series: [
    {
      name: '访问量',
      type: 'heatmap',
      data: data,
      label: {
        show: false
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
</script>

<template>
  <ChartContainer title="用户访问时段热力图" :option="option" />
</template>